<script setup>
import { ref, reactive } from 'vue'

const showElement = ref(true)
const userType = ref('admin')
const score = ref(85)
const isLoggedIn = ref(true)
const items = ref(['苹果', '香蕉', '橙子'])
const showDetails = ref(false)

const user = reactive({
  name: 'Alice',
  age: 25,
  role: 'developer'
})

const toggleShowElement = () => {
  showElement.value = !showElement.value
}

const toggleLogin = () => {
  isLoggedIn.value = !isLoggedIn.value
}

const changeUserType = (type) => {
  userType.value = type
}

const updateScore = (newScore) => {
  score.value = newScore
}

const toggleItems = () => {
  if (items.value.length > 0) {
    items.value = []
  } else {
    items.value = ['苹果', '香蕉', '橙子']
  }
}

const toggleDetails = () => {
  showDetails.value = !showDetails.value
}
</script>

<template>
  <div class="demo-container">
    <h2>条件渲染 (v-if, v-else-if, v-else) 演示</h2>
    
    <!-- 基础 v-if 示例 -->
    <div class="example">
      <h3>1. 基础 v-if 示例</h3>
      <button @click="toggleShowElement">切换显示状态: {{ showElement }}</button>
      <p v-if="showElement">这个元素只有在 showElement 为 true 时才会显示</p>
    </div>
    
    <!-- v-if / v-else-if / v-else 示例 -->
    <div class="example">
      <h3>2. v-if / v-else-if / v-else 示例</h3>
      <div>
        <button @click="changeUserType('admin')">设为管理员</button>
        <button @click="changeUserType('user')">设为普通用户</button>
        <button @click="changeUserType('guest')">设为访客</button>
      </div>
      <p>当前用户类型: {{ userType }}</p>
      
      <div v-if="userType === 'admin'">
        <h4>管理员面板</h4>
        <p>欢迎管理员！您可以访问所有功能。</p>
        <ul>
          <li>管理用户</li>
          <li>管理系统设置</li>
          <li>查看报告</li>
        </ul>
      </div>
      <div v-else-if="userType === 'user'">
        <h4>用户面板</h4>
        <p>欢迎用户！您可以使用基本功能。</p>
        <ul>
          <li>查看个人信息</li>
          <li>修改设置</li>
        </ul>
      </div>
      <div v-else-if="userType === 'guest'">
        <h4>访客面板</h4>
        <p>您当前是访客身份，请登录以获取完整功能。</p>
        <ul>
          <li>浏览公开内容</li>
        </ul>
      </div>
      <div v-else>
        <h4>未知用户类型</h4>
        <p>无法识别您的用户类型。</p>
      </div>
    </div>
    
    <!-- 条件渲染分数等级 -->
    <div class="example">
      <h3>3. 分数等级判断</h3>
      <div>
        <label>调整分数: </label>
        <input type="range" min="0" max="100" v-model="score" /> {{ score }}
      </div>
      
      <div v-if="score >= 90">
        <h4>优秀 (A)</h4>
        <p>成绩非常出色！继续保持！</p>
      </div>
      <div v-else-if="score >= 80">
        <h4>良好 (B)</h4>
        <p>成绩不错，还有提升空间。</p>
      </div>
      <div v-else-if="score >= 70">
        <h4>中等 (C)</h4>
        <p>成绩一般，需要更多努力。</p>
      </div>
      <div v-else-if="score >= 60">
        <h4>及格 (D)</h4>
        <p>刚好及格，需要加强学习。</p>
      </div>
      <div v-else>
        <h4>不及格 (F)</h4>
        <p>成绩不理想，请加倍努力。</p>
      </div>
    </div>
    
    <!-- 登录状态条件渲染 -->
    <div class="example">
      <h3>4. 登录状态展示</h3>
      <button @click="toggleLogin">切换登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}</button>
      
      <div v-if="isLoggedIn">
        <h4>用户信息</h4>
        <p>姓名: {{ user.name }}</p>
        <p>年龄: {{ user.age }}</p>
        <p>角色: {{ user.role }}</p>
        <button @click="toggleDetails">
          {{ showDetails ? '隐藏' : '显示' }}详细信息
        </button>
        
        <div v-if="showDetails">
          <h5>详细信息</h5>
          <p>这是用户的详细信息部分，在点击"显示详细信息"后才会显示。</p>
          <p>注册时间: 2023-01-15</p>
          <p>最后登录: 2023-10-10</p>
        </div>
      </div>
      <div v-else>
        <h4>请登录</h4>
        <p>您需要登录才能查看此内容。</p>
        <button>登录</button>
      </div>
    </div>
    
    <!-- 列表条件渲染 -->
    <div class="example">
      <h3>5. 列表条件渲染</h3>
      <button @click="toggleItems">切换列表项</button>
      
      <div v-if="items.length > 0">
        <h4>水果列表</h4>
        <p>共有 {{ items.length }} 个水果:</p>
        <ul>
          <li v-for="(item, index) in items" :key="index">{{ item }}</li>
        </ul>
      </div>
      <div v-else>
        <h4>空列表</h4>
        <p>当前没有水果。</p>
      </div>
    </div>
    
    <!-- template 上的条件渲染 -->
    <div class="example">
      <h3>6. 在 template 上使用条件渲染</h3>
      <p>使用 &lt;template&gt; 元素可以有条件地渲染多个元素而不引入额外的DOM节点:</p>
      
      <template v-if="isLoggedIn">
        <h4>欢迎回来!</h4>
        <p>用户名: {{ user.name }}</p>
        <p>您有 3 条未读消息</p>
      </template>
      <template v-else>
        <h4>您好，陌生人</h4>
        <p>请登录以查看您的个人内容</p>
      </template>
    </div>
  </div>
</template>

<style scoped>
.demo-container {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  background-color: #f9f9f9;
}

.example {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
  margin: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #42b883;
  color: white;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

input[type="range"] {
  width: 200px;
  margin: 0 10px;
}

ul {
  margin: 10px 0;
  padding-left: 20px;
}

h4 {
  margin-top: 10px;
  color: #333;
}
</style>